<template>
  <div id="pagebox" style="background: #fff; height:100%; text-align: left">
    <link rel="stylesheet" href="/assstatic/css/lot_detail.css">
    <div class="batchInfo" v-if="infoList">
      <div class="batchName">
        {{infoList.markTaskName}}
        <span class="nextstep">{{infoList.nextStep|nextStep}}</span>
      </div>
      <div class="info-one info" v-if="infoList">
        <ul>
          <li>
            文件数量&nbsp;:
            <span>&nbsp;{{infoList.fileCount}}</span>
          </li>
          <li>
            标注人员&nbsp;:
            <span
              :title="infoList.users[0]!=null ? infoList.users[0].realname!=null?infoList.users[0].realname:infoList.users[0].account : '--'"
            >&nbsp;{{infoList.users[0]!=null ? infoList.users[0].realname!=null?infoList.users[0].realname:infoList.users[0].account : '--'}}</span>
          </li>
          <li>
            检查人员&nbsp;:
            <span
              :title="infoList.users[1]!=null ? infoList.users[1].realname!=null?infoList.users[1].realname:infoList.users[1].account : '--'"
            >&nbsp;{{infoList.users[1]!=null ? infoList.users[1].realname!=null?infoList.users[1].realname:infoList.users[1].account : '--'}}</span>
          </li>
          <li>
            质检人员&nbsp;:
            <span
              :title="infoList.users[2]!=null ? infoList.users[2].realname!=null?infoList.users[2].realname:infoList.users[2].account : '--'"
            >&nbsp;{{infoList.users[2]!=null ? infoList.users[2].realname!=null?infoList.users[2].realname:infoList.users[2].account : '--'}}</span>
          </li>
        </ul>
      </div>
      <div class="info-two info">
        <ul>
          <li>
            好数据量&nbsp;:
            <span>&nbsp;{{infoList.goodDataCount}}</span>
          </li>
          <li>
            开始时间&nbsp;:
            <span>&nbsp;{{infoList.startTimes[0]|formatDate}}</span>
          </li>
          <li>
            检查时间&nbsp;:
            <span>&nbsp;{{infoList.startTimes[1]|formatDate}}</span>
          </li>
          <li>
            质检时间&nbsp;:
            <span>&nbsp;{{infoList.startTimes[2]|formatDate}}</span>
          </li>
        </ul>
      </div>
      <div class="info-three info">
        <ul>
          <li>
            坏数据量&nbsp;:
            <span>&nbsp;{{infoList.badDataCount}}</span>
          </li>
          <li>
            完成时间&nbsp;:
            <span>&nbsp;{{infoList.endTime|formatDate}}</span>
          </li>
          <li>
            检查评语&nbsp;:
            <span
              :title="infoList.evaluations[1]"
            >&nbsp;{{infoList.evaluations[1]?infoList.evaluations[1]:"--"}}</span>
          </li>
          <li>
            质检评价&nbsp;:
            <span
              :title="infoList.evaluations[2]"
            >&nbsp;{{infoList.evaluations[2]?infoList.evaluations[2]:"--"}}</span>
          </li>
        </ul>
      </div>
      <div class="info-four info">
        <ul>
          <li>
            正确率&nbsp;:
            <span>&nbsp;{{infoList.accuracyRate}}%</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="noneresult" v-if="contentNull">暂无数据</div>
    <div class="table con-list progressList" v-else>
      <table width="100%">
        <thead>
          <tr>
            <td width="5%">序号</td>
            <td>标注结果</td>
            <td>检查结果</td>
            <td>质检结果</td>
            <td width="10%">
              正确率
              <b class="sort">
                <span class="top" @click="rank(0)"></span>
                <i class="bottom" @click="rank(1)"></i>
              </b>
            </td>
            <td width="10%">操作</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(list,index) in filesList" :key="list+index">
            <td>{{index}}</td>
            <td>--</td>
            <td>--</td>
            <td>--</td>
            <td
              :style="{ 'color' : list.rate!==1 || !list.rate ? 'red':'black'}"
              style
            >{{list.rate}}%</td>
            <td>
              <a class="rem-btn" v-on:click="seeresult(list, index)" :style="notClick(list)">查看结果</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="pagesize" id="pagesize"></div>
  </div>
</template>
<script>
import $ from 'jquery';
export default {
  name:"MarktaskDetail",
  data(){
    return{
      batchId:'',
      taskId:'',
      markTaskId:'',
      filesList:null,
      infoList:null,
      item: null,
      list: null,
      total:0,
      pageSize: 10,
      contentNull: false,
      audioSrc:'',
      playIndex:'-',
      playType:'pause',
      postData: {
          currPage:1,
          pageSize:10
      },
      finalData: [], // 处理后的最后结果
      markStatus: true, // 是否存在标注环节
      checkStatus: false, // 是否存在检查环节
      testStatus: false, // 是否存在质检环节
      // processed: false, // 是否已经处理过
    }
  },
  created(){
    this.taskId = this.Utils.getQueryStringArgs().taskId;
    this.markTaskId = this.Utils.getQueryStringArgs().markTaskId;
    this.batchId = this.Utils.getQueryStringArgs().batchId;
  },
  mounted :function () {
      var self = this;
      var proxyurl = '/v1/web/mark-task/detail?selectType=batch_progress_manager&&markTaskId=' + this.markTaskId+'&taskId='+this.taskId;
      this.$api
          .method(proxyurl, {}, "GET")
          .then(data => {
            if (data == undefined || data == "") {
              return;
            }
           if (data.rt.status == 200) {
                this.$set(self,'infoList',data.data)
            } else {
                self.$message(data.rt.status);
            }
          })
          .catch(err => {
            console.log(err);
          });
      this.search();
  },
  methods: {
      rank(type){
          if(type == 0){
              this.filesList.sort(function (a, b) {
                  return b.rate * 1 - a.rate * 1
              })
          }else{
              this.filesList.sort(function (a, b) {
                  return a.rate * 1 - b.rate * 1
              })
          }
      },
      notClick: function (item) {
          if (!item.fileId){ // 如果fileId不存在
              return {color: '#CACAC9', border: "1px solid #cacaca", "pointer-events": "none"};
          }
      },
      search: function () {  //查询
          let self = this;
          self.postData['taskId'] = this.taskId;
          self.postData['markTaskId'] = this.markTaskId;
          self.postData['batchId'] = this.batchId;
          self.PageNav.load(1,self.pageSize,"/v1/web/mark-task/detail/files",self.postData,function(data) {
            if (data.list == undefined || data.list == null || data.list == "") {
                self.filesList  = null;
                self.contentNull = true;
            } else {
                self.filesList = data.list;
                self.contentNull = false;
            }
            self.pageSize = data.pageSize == 0 ? 10 : data.pageSize;
            }
          );
      },
      // 对比
      comparison: function (){
          var data = this.finalData || [];
          for (var i = 0,len = data.length; i < len; i++) {
              var dataInfo = data[i].info || [];
              if (dataInfo[0] && dataInfo[1]) { // 检查
                  this.changeComparison(dataInfo[0],dataInfo[1],1)
              }else if (dataInfo[0] && dataInfo[2]) { // 质检
                  this.changeComparison(dataInfo[0],dataInfo[2],2)
              }
          }
      },
      /**
       * 对比数据，然后变色
       * @param data1 数据一
       * @param data2 数据一
       * @param type 类型 1 和检查 2 和质检
       */
      changeComparison: function (data1, data2) {
          var contentDomL = '', // 对比结果1
              contentDomR = ''; // 对比结果2
          for (var i = 0,len = data1.rtxt.length; i < len; i++) {
              var lData = data1.rtxt[i] || '';
              var rData = data2.rtxt[i] || '';
              contentDomL = $('<span></span>').append(lData)[0];
              contentDomR = $('<span></span>').append(rData)[0];
              this.MyCompare(contentDomL,contentDomR);
              data1.rtxt[i] = contentDomL.outerHTML;
              data2.rtxt[i] = contentDomR.outerHTML
          }
      },
      // 工具函数,判断是否是数组
      isArray: function (data) {
          return Array.isArray(data);
      },
      // 前置函数
      preDataHandling: function (data) {
          if (!this.isArray(data)) { // 不是数组
              return false;
          }

          this.finalData = []; // 初始化
          for (var i = 0,len = data.length; i < len ; i++) {
              this.dataHandling(data[i].extend , data[i].result || [],data[i].name,data[i].accuracyRate,data[i].isFree);
              // if(data[i].result)  { // 只要有一个存在就是
              //     this.contentNull = false;
              // }
              if (i === 0) { // 不论多少个文件,其内容应该一致
                  this.changeStatus(data[i]);
              }
          }

          this.comparison();
      },
      // 处理文件的环节参数
      changeStatus: function (data) {
          var that = this;
          try {
              that.markStatus = data.markStatus || false;
              that.checkStatus = data.checkStatus || false;
              that.testStatus = data.testStatus || false;
          }catch (e) {
              console.warn("参数错误");
          }
      },
      /**
       * 数据处理
       * @param data 一条数据，也就是一个任务下面一条小任务的数据
       * @param name 任务名
       * @param rate 正确率
       * @returns {boolean}
       */
      dataHandling: function (extend, data, name, rate) {
          if (!this.isArray(data)) { // 不是数组
              return false;
          }

          var newData = {}; // 定义一个新数组，存数据
          newData.name = name;
          newData.rate = rate;
          newData.markName = ''; // 标注员信息
          newData.checkName = ''; // 检查员信息
          newData.testName = ''; // 检查员信息
          newData.markReplaceAate = ''; // 标注低置信替换率
          newData.checkReplaceAate = ''; // 标注低置信替换率
          newData.info = [];
          newData.fileId = '';
          ////// 兼容处理 针对免检 (暂不做任何处理)

          for (var i = 0,len = data.length; i < len; i++){
              var finalResult = data[i].finalResult ? data[i].finalResult : {};
              var resultText = finalResult.resultText ? JSON.parse(finalResult.resultText): {};
              var fileId = data[i].fileInfo ? data[i].fileInfo.fileId : "";
              var userText = resultText.resultText;
              var lArr = []; // 临时数组
              for (var j = 0, len2 = 1; j < len2; j++) { // 处理vads
                  lArr.push(userText);
              }
              if (!newData.info[data[i].step]){
                  newData.info[data[i].step] = {
                      step:data[i].step,
                      rtxt:lArr
                  }
              }
              if (!newData.fileId) { // 赋值 fileId
                  newData.fileId = fileId;
              }
          }

          /*针对extend 字段*/
          for (var k in extend) {
              if (k === 'marker') { // 标注信息
                  newData.markName = extend[k].name || '';
              }else if (k === 'checker') {
                  newData.checkName = extend[k].name || '';
              }else if (k === 'auther') {
                  newData.testName = extend[k].name || '';
              }else if (k === 'step_0'){
                  newData.markReplaceAate = extend[k].confidence;
              }else if (k === 'step_1') {
                  newData.checkReplaceAate = extend[k].confidence;
              }
          }

          this.finalData.push(newData);
      },
      // 工具函数 (是否符合)
      isNot: function (data) {
          if (!data) {
              console.warn("数据不正常");
              return false;
          }
          return true
      },
      seeresult:function (item, index) { //查看文件
          var pageCur = 1, // 默认第一页
              pageSize = $('#changepage').val(),
              fileInd = 0;
          $('.flip-right ul li').each(function(ind, item){
              if($(item).children('a').attr('class') == 'hover'){
                  pageCur = $(this).text();
              }
          })
          fileInd = (pageCur - 1) * pageSize + index;

          var url="/assets/home/result-page/?markTaskId="+this.markTaskId+'&taskId='+this.taskId+'&fileid='+item.fileId + '&fileInd=' + fileInd +'&batchId=' +this.batchId;
          window.open(url);
      }
  },
  filters: {
    setShowInfo: function (value) {
        if (value !== 0 && !value) {
            return '--'
        }
        return value
    },
    getAccuracyRate:function(value){
        if(value!==0 && !value){
            return '--';
        }else{
            return (parseFloat(value)*100).toFixed(2)+'%';
        }
    },
    getName:function (value) {
        //获取字符串真实长度
        var length = value.replace("/[\u0391-\uFFE5]/g","aa").length;
        if(value && (length<20 || length ==20) ){
            return value;
        }else if(value && length>20){

            for(var i=10;i<value.length;i++){
                if(value.substr(0,i).replace("/[^\x00-\xff]/g","mm").length>=20){
                    return value.substr(0,i)+"...";
                }
            }
            return value;
        }else{
            return '--'
        }
    },
    nextStep:function (value) { 
			if (value == 0) {
				return '标注任务'
			} else if (value == 1) {
				return '检查任务'
			} else if (value == 2) {
				return '质检任务'
			} else if (value == 3) {
				return '角色合并'
			}
    },
    formatDate:function (value) { //过滤时间  page\static\js\member\my_task.js front\src\main\resources\templates\member\my_task.html
			if (value != null) {
				function addZero(val) {
					if (val < 10) {
						return '0' + val;
					} else {
						return val;
					}
				}
				var dataTime = '';
				var data = new Date();
				data.setTime(value);
				var year = data.getFullYear();
				var month = addZero(data.getMonth() + 1);
				var day = addZero(data.getDate());
				// var hour = addZero(data.getHours());
				// var minute = addZero(data.getMinutes());
				// var second = addZero(data.getSeconds());
				dataTime = year + '-' + month + '-' + day;
				return dataTime; //将格式化后的字符串输出到前端显示
			} else {
				return '--';
			}
		}
  }
}
</script>